<template>
  <div class="chartWrap">
    <Charts :option="option"
            ref="chart" />
            <div class="description">
      <div class="description1">累计可研完成率达成目标节点进度 
        <!-- <el-popover
          placement="top-start"
          title="完成指标"
          width="200"
          trigger="hover"
          content="
          本年累计营业收入 >= 月度营业收入指标
          ">
          <i slot="reference" class="el-icon-warning-outline"></i>
        </el-popover> -->
      </div>
      <div class="description2">累计可研完成率未达成目标节点进度 
        <!-- <el-popover
          placement="top-start"
          title="未完成指标"
          width="200"
          trigger="hover"
          content="  本年累计营业收入 < 月度营业收入指标">
         <i  slot="reference" class="el-icon-warning-outline"></i>
        </el-popover> -->
      </div>
    </div>
  </div>
</template>

<script>
import Charts from "@/components/Charts.vue";
export default {
  name: "Chart2",
  components: { Charts },
  props: ["chartData"],
  data () {
    return {
      option: {},
    };
  },
  methods: {
    computedOption () {
      let month = 0
      const nameList = this.chartData.map((item) => {
        month = item.month
        return item.project_name+`(1-${item.month}月)`});
      console.log('----chartData', this.chartData)
      nameList.push(`营业收入合计（1-${month}月）`);
      const businessIncomeTotalIndex = this.chartData.map(
        (item) => item.businessIncomeTotalIndex
      );
      // businessIncomeTarget 月度营业收入指标
      const businessIncomeTarget = this.chartData.map(
        (item) => parseInt(item.businessIncomeTarget)
      );
      businessIncomeTarget.push(
        businessIncomeTarget.reduce((acc, cur) => {
          console.log('acc----', acc, 'cur-----', cur)
          return (acc += cur)
        }, 0)
      );
      console.log('月度经营收入指标---------', businessIncomeTarget)
      // 本年累计营业收入指标
      businessIncomeTotalIndex.push(
        businessIncomeTotalIndex.reduce((acc, cur) => (acc += cur), 0)
      );
      // 本年累计营业收入
      const businessIncomeTotal = this.chartData.map(
        (item) => item.businessIncomeTotal
      );
      businessIncomeTotal.push(
        businessIncomeTotal.reduce((acc, cur) => {
          console.log('acc----', acc, 'cur-----', cur)
          return (acc += cur)
        }, 0)
      );
      const annualOperatingRevenueCompletionRate = this.chartData.map(
        (item) => item.annualOperatingRevenueCompletionRate
      );
      let points = []
      businessIncomeTotal.forEach((item, index) => {
        console.log('this.chartData[index]----------------------',this.chartData[index])
        if(index!= (businessIncomeTotal.length-1)){
          let obj = {
            // type: 'Max',
            // value: parseInt((item / businessIncomeTotalIndex[index] * 100)) + '%',
            value: this.chartData[index].operatingRevenueProgress||'',
            label: {
              show: true,
              position: 'right'
            },
            name: "最大值",
            symbol: "diamond",
            symbolSize: 15,
            yAxis: item,
            xAxis: index,
            symbolOffset: ["-150%", "40%"],
            itemStyle: {
              //设置标记点的样式
              // normal: { color: (parseInt((item / businessIncomeTotalIndex[index] * 100)) >= 100) ? '#c00000' : '#70ad47' },
              normal: {color: this.chartData[index].operatingRevenueProgress == '达成'? '#70ad47' : '#c00000'}
            },
          }
          // let obj =  { type: 'max', name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 }
          points.push(obj)
        } else{
           let res = item >= businessIncomeTarget[index] ? '达成': '未达成'
           let obj = {
            // type: 'Max',
            // value: parseInt((item / businessIncomeTotalIndex[index] * 100)) + '%',
            value: res,
            label: {
              show: true,
              position: 'right'
            },
            name: "最大值",
            symbol: "diamond",
            symbolSize: 15,
            yAxis: item,
            xAxis: index,
            symbolOffset: ["-150%", "40%"],
            itemStyle: {
              //设置标记点的样式
              // normal: { color: (parseInt((item / businessIncomeTotalIndex[index] * 100)) >= 100) ? '#c00000' : '#70ad47' },
              normal: {color:  res == '达成'? '#70ad47' : '#c00000'}
            },
          }
          // let obj =  { type: 'max', name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 }
          points.push(obj)
        }
      })
      console.log("this.points------", businessIncomeTotal, businessIncomeTotalIndex);
      const option = {
        title: {
          show: true,
          text: "营业收入可研兑现情况",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            let dataIndex = 0;
            let str = `<span style='color:#000; font-weight: bold;'>营业收入合计</span><br/>` + params.map(item => {
              dataIndex = item.dataIndex;
              return `<span style='background:${item.color}; display:inline-block; 
              width:10px;height:10px;border-radius:50%; margin-right:5px'></span>
              ${item.seriesName || ''}: ${item.data || '0'}`
            }).join('<br/>')
            str += `<br/><span style='background:${businessIncomeTotal[dataIndex] / businessIncomeTotalIndex[dataIndex] >= 1 ?"#70ad47":"#c00000"}; display:inline-block; 
              width:10px;height:10px;border-radius:50%; margin-right:5px'></span>
              完成率: ${parseInt((businessIncomeTotal[dataIndex] / businessIncomeTotalIndex[dataIndex]) * 100) || 0}%
          `;
            return str;
          },
        },
        legend: {
          bottom: 0
        },
        xAxis: {
          type: "category",
          data: nameList,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "目标值(万元)",
            data: businessIncomeTotalIndex,
            type: "bar",
            barWidth: 30,
            itemStyle: {
              color: "rgb(73,100,169)",
            },
            barGap: "80%",
            label: {
              show: true,
              position: "top",
            },
            // markPoint: {
            //   data: [
            //     { type: "max", name: "Max" },
            //     { type: "min", name: "Min" }
            //   ],
            // },
          },
          {
            name: "实际值(万元)",
            data: businessIncomeTotal,
            type: "bar",
            barWidth: 30,
            itemStyle: {
              color: "#CCA035",
            },
            label: {
              show: true,
              position: "top",
            },
            markPoint: {
              //设置标记点
              data: points
            },
          },
        ],
      };
      this.option = option;
    },
  },
  watch: {
    chartData: {
      immediate: true,
      handler () {
        this.computedOption();
      },
    },
  },
};
</script>

<style lang="scss">
.chartWrap {
  position: relative;
  .description {
    position: absolute;
    font-size: 12px;
    bottom: 0;
    right: 0;
    .description1::before {
      content: "";
      display: inline-block;
      background: #70ad47;
      width: 8px;
      height: 8px;
      transform: rotateZ(45deg);
      transform-origin: center;
      margin: 0 5px;
    }
    .description2::before {
      content: "";
      display: inline-block;
      background: #c00000;
      width: 8px;
      height: 8px;
      transform: rotateZ(45deg);
      transform-origin: center;
      margin: 0 5px;
    }
  }
}
</style>
